<template>
	<div class="z-qqyy">
		<!-- 头部 -->
		<div class="nav-fd">
			<router-link to="/downloadapp">
				<div class="get-App" >
					下载App
				</div>
			</router-link>
			<router-link to="/qianqianSearch">
				<div class="serch-logo ">
					<van-icon name="search" size="0.775rem" class="search"/>
				</div>
			</router-link>
		</div>
		<!-- 轮播 -->
		<div class="lb">
			<van-swipe :autoplay="3000" :show-indicators='false'>
			  <van-swipe-item v-for="(item, index) in info" :key="index.id" class='lbmodular'>
					<router-link :to="item.link">
						<img :src="item.url" class="lbimg"/>
					</router-link>
			  </van-swipe-item>
			</van-swipe>
		</div>
		<!-- 最新专辑 -->
		<div class="page1 group">
			<div class="title">
				<h2>最新专辑</h2>
				<router-link to="/downloadapp">
					<a href="">
						更多
						<img :src="more"/>
					</a>
				</router-link>
			</div>
			<div class="content">
				<van-swipe :show-indicators="false" :loop="false" class="pd" :width="165">
					<van-swipe-item v-for="(item, index) in group" :key="index.id" class="carousel">
						<router-link :to="item.link">
							<a href="#" class="info">
								<img :src="item.url">
								<h3>{{item.title}}</h3>
								<p>{{item.text}}</p>
							</a>
						</router-link>
					</van-swipe-item>
				</van-swipe>
			</div>
		</div>
		<!-- 推荐歌单 -->
		<div class="page2 group">
			<div class="title">
				<h2>推荐歌单</h2>
				<router-link to="/downloadapp">
					<a href="#">
						更多
						<img :src="more"/>
					</a>
				</router-link>
			</div>
			<router-link to="/SongList1">
				<div class="content">
					<van-swipe :show-indicators="false" :loop="false" class="pd" :width="165">
						<van-swipe-item v-for="(item, index) in group2" :key="index.id" class="carousel">
							<router-link :to="item.link">
								<a href="#" class="info">
									<img :src="item.url">
									<h3>{{item.title}}</h3>
									<p>{{item.text}}</p>
								</a>
							</router-link>
						</van-swipe-item>
					</van-swipe>
				</div>
			</router-link>
		</div>
		<!-- 推荐歌手 -->
		<div class="page3">
			<div class="title">
				<h2>推荐歌手</h2>
				<router-link to="/downloadapp">
					<a href="#">
						更多
						<img :src="more"/>
					</a>
				</router-link>
			</div>
			<div class="content">
				<van-swipe :show-indicators="false" :loop="false" class="pd" :width="115">
					<van-swipe-item v-for="(item, index) in group3" :key="index.id" class="carousel2">
						<router-link :to="item.link">
							<a href="#" class="info">
								<div class="info-img">
									<img :src="item.url">
								</div>
								<h3 class="info-h">{{item.title}}</h3>
								<p class="info-p">{{item.text}}</p>
							</a>
						</router-link>
					</van-swipe-item>
				</van-swipe>
			</div>
		</div>
		<!-- 新歌推荐 -->
		<div class="ns-recommend pd2">
			<div class="title">
				<h2>新歌推荐</h2>
				<router-link to="/downloadapp">
					<a href="#">
						更多
						<img :src="more"/>
					</a>
				</router-link>
			</div>
			<div class="ns-content">
				<div class="ns-modular">
					<div class="ns-tab">
						<div class='ns-tabmore'>
							<router-link to="/NewSongRecommend">
								<div class="content1">
									<div class="content-fi">
										<img :src="nsimg1" alt="">
									</div>
									<div class="content-se">
										<span>{{nsname1}}</span>
										<span>{{nsname11}}</span>
									</div>
									<div class="content-th">
										<van-icon name="play" />
									</div>
								</div>
							</router-link>
							<router-link to="xuguanghan">
								<div class="content1">
									<div class="content-fi">
										<img :src="nsimg2" alt="">
									</div>
									<div class="content-se">
										<span>{{nsname2}}</span>
										<span>{{nsname21}}</span>
									</div>
									<div class="content-th">
										<van-icon name="play" />
									</div>
								</div>
							</router-link>
							<router-link to="/HereComesTheGangster">
								<div class="content1">
									<div class="content-fi">
										<img :src="nsimg3" alt="">
									</div>
									<div class="content-se">
										<span>{{nsname3}}</span>
										<span>{{nsname31}}</span>
									</div>
									<div class="content-th">
										<van-icon name="play" />
									</div>
								</div>
							</router-link>
						</div>
						
						<div class='ns-tabmore'>
							<router-link to="/huangweier">
								<div class="content1">
									<div class="content-fi">
										<img :src="nsimg4" alt="">
									</div>
									<div class="content-se">
										<span>{{nsname4}}</span>
										<span>{{nsname41}}</span>
									</div>
									<div class="content-th">
										<van-icon name="play" />
									</div>
								</div>
							</router-link>
							<router-link to="/sanshiyunian">
								<div class="content1">
									<div class="content-fi">
										<img :src="nsimg5" alt="">
									</div>
									<div class="content-se">
										<span>{{nsname5}}</span>
										<span>{{nsname51}}</span>
									</div>
									<div class="content-th">
										<van-icon name="play" />
									</div>
								</div>
							</router-link>
							<router-link to="/GoingHome">
								<div class="content1">
									<div class="content-fi">
										<img :src="nsimg6" alt="">
									</div>
									<div class="content-se">
										<span>{{nsname6}}</span>
										<span>{{nsname61}}</span>
									</div>
									<div class="content-th">
										<van-icon name="play" />
									</div>
								</div>
							</router-link>
						</div>
						<div class='ns-tabmore'>
							<router-link to="/Moma">
								<div class="content1">
									<div class="content-fi">
										<img :src="nsimg7" alt="">
									</div>
									<div class="content-se">
										<span>{{nsname7}}</span>
										<span>{{nsname71}}</span>
									</div>
									<div class="content-th">
										<van-icon name="play" />
									</div>
								</div>
							</router-link>
							<router-link to="/DanceByMyself">
								<div class="content1">
									<div class="content-fi">
										<img :src="nsimg8" alt="">
									</div>
									<div class="content-se">
										<span>{{nsname8}}</span>
										<span>{{nsname81}}</span>
									</div>
									<div class="content-th">
										<van-icon name="play" />
									</div>
								</div>
							</router-link>
							<router-link to="/Wonder">
								<div class="content1">
									<div class="content-fi">
										<img :src="nsimg9" alt="">
									</div>
									<div class="content-se">
										<span>{{nsname9}}</span>
										<span>{{nsname91}}</span>
									</div>
									<div class="content-th">
										<van-icon name="play" />
									</div>
								</div>
							</router-link>
						</div>
					</div>
				</div>
			</div>
		</div>
		<qianqian></qianqian>
		<HomePage></HomePage>
	</div>
</template>

<script>
import qianqian from '../components/qianqian.vue'
import HomePage from '../components/HomePage.vue'

import Vue from 'vue';
import { Lazyload } from 'vant';
Vue.use(Lazyload);


export default {
  name: 'qqyy',
  props: {
	msg: String
  },
  components: {
  	qianqian,
  	HomePage,
  },
  data(){
	return{
		more:require("../assets/z-qqyy/d1.png"),
		group:[
			{url:require("../assets/z-qqyy/d10.jpg"),title:"梦想少年行",text:"肖然心",link:"/Album1"},
			{url:require("../assets/z-qqyy/Album5/1.jpg"),title:"我们的我们",text:"姜浩",link:"/Album5"},
			{url:require("../assets/z-qqyy/Album2/1.jpg"),title:"耗尽",text:"薛之谦 / 郭聪明",link:"/Album2"},
			{url:require("../assets/z-qqyy/Album3/1.jpg"),title:"怪我更爱我自己",text:"赵紫骅",link:"/Album3"},
			{url:require("../assets/z-qqyy/Album4/1.jpg"),title:"感冒",text:"尹毓恪",link:"/Album4"},
			{url:require("../assets/z-qqyy/Album6/1.jpg"),title:"Spring Styx",text:"Cephalosis",link:"/Album6"},
			{url:require("../assets/z-qqyy/Album7/1.jpg"),title:"HOW ELEGANT THE SORROW Piano Concerto No.1",text:"WAILOK",link:"/Album7"},
			{url:require("../assets/z-qqyy/Album8/1.jpg"),title:"BLOOM feat. TENDRE",text:"空音",link:"/Album8"},
		],
		group2:[
			{url:require("../assets/z-qqyy/1_.jpg"),title:"抖音热门舞曲",text:"26首单曲",link:"/SongList1"},
			{url:require("../assets/z-qqyy/2_.jpg"),title:"惊！蒂花之秀 原来冠军早已被内定",text:"25首单曲",link:"/SongList2"},
			{url:require("../assets/z-qqyy/3_.jpg"),title:"哦，又是该死的凡尔赛文学",text:"26首单曲",link:"/SongList3"},
			{url:require("../assets/z-qqyy/4_.jpg"),title:"嗨 在吗？双十一剁手了吗",text:"25首单曲",link:"/SongList4"},
			{url:require("../assets/z-qqyy/5_.jpg"),title:"日系 | 那些唱功极佳的声优们",text:"28首单曲",link:"/SongList5"},
			{url:require("../assets/z-qqyy/6_.jpg"),title:"精选 | 耳朵不倦，百听不厌的华语流行",text:"28首单曲",link:"/SongList6"},
			{url:require('../assets/z-qqyy/SongList7/22.jpg'),title:"感恩节特辑 | 听完不暖心我请你吃火鸡",text:"23首单曲",link:"/SongList7"},
			{url:require("../assets/z-qqyy/SongList8/12.jpg"),title:"上帝收回了上帝之手",text:"10首单曲",link:"/SongList8"},
		],
		group3:[
			{url:require("../assets/z-qqyy/01.jpg"),title:"薛之谦",text:"7079162人已收藏",link:"/Singer1"},
			{url:require("../assets/z-qqyy/02.jpg"),title:"许嵩",text:"4143018人已收藏",link:"/Singer2"},
			{url:require("../assets/z-qqyy/03.jpg"),title:"田馥甄",text:"231036人已收藏",link:"/Singer3"},
			{url:require("../assets/z-qqyy/04.jpg"),title:"刘惜君",text:"479170人已收藏",link:"/Singer4"},
			{url:require("../assets/z-qqyy/05.jpg"),title:"龙梅子",text:"39601人已收藏",link:"/Singer5"},
			{url:require("../assets/z-qqyy/06.jpg"),title:"林俊杰",text:"4017909人已收藏",link:"/Singer6"},
			{url:require("../assets/z-qqyy/07.jpg"),title:"大张伟",text:"180099人已收藏",link:"/Singer7"},
			{url:require("../assets/z-qqyy/08.jpg"),title:"周深",text:"167431人已收藏",link:"/Singer8"},
			{url:require("../assets/z-qqyy/09.jpg"),title:"蔡健雅",text:"810640人已收藏",link:"/Singer9"},
			{url:require("../assets/z-qqyy/10.jpg"),title:"金莎",text:"335757人已收藏",link:"/Singer10"},
			{url:require("../assets/z-qqyy/11.jpg"),title:"赵传",text:"942692人已收藏",link:"/Singer11"},
		],
		info:[
			{url:require('../assets/homepage/4.jpg'),link:"/Lunbo1"},
			{url:require('../assets/homepage/5.jpg'),link:"/Lunbo2"},
			{url:require('../assets/homepage/6.jpg'),link:"/Lunbo3"},
			{url:require('../assets/homepage/7.jpg'),link:"/Lunbo4"},
			{url:require('../assets/homepage/8.jpg'),link:"/Lunbo5"},
			{url:require('../assets/homepage/1.jpg'),link:"/Lunbo6"},
			{url:require('../assets/homepage/2.jpg'),link:"/Lunbo7"},
			{url:require('../assets/homepage/3.jpg'),link:"/Lunbo8"},
		],
		nsimg1:require('../assets/homepage/ChAKEl-s4xSAWltTAFvj_vh0Tz0573.jpg'),
		nsimg2:require('../assets/homepage/ChAKEl-WpfSAQwpbACvHHx_Sm1k685.jpg'),
		nsimg3:require('../assets/homepage/ChAKEV-s0WCAdkp4AALf1cydLPs783.jpg'),
		nsimg4:require('../assets/homepage/ChAKEV-St0WAC99HACNoLm__-Ow604.jpg'),
		nsimg5:require('../assets/homepage/ChAKEV-s2sSADdIlAD6vNSPhUqc558.jpg'),
		nsimg6:require('../assets/homepage/ChAKEV-aczGATO-EACK2cum6N_c211.jpg'),
		nsimg7:require('../assets/homepage/ChAKEV-SeWGAPA1EAAsHjUOwQ3M039.jpg'),
		nsimg8:require('../assets/homepage/ChAKEV-RYpmAKYpZAHFmtqv3CBs231.jpg'),
		nsimg9:require('../assets/homepage/ChAKEV-lGd2AYnuSAG_QYIpOpoo129.jpg'),
		nsname1:'爱情听说过没见过',
		nsname2:'别再想见我',
		nsname3:'Here Comes The Gangster',
		nsname4:'我是歌星',
		nsname5:'三十余年',
		nsname6:'Going Home',
		nsname7:'Moma',
		nsname8:'Dance By Myself (Retro Rock Band Ver.)',
		nsname9:'Wonder',
		nsname11:'高安',
		nsname21:'许光汉',
		nsname31:'Berlin Psycho Nurses柏林护士',
		nsname41:'黄威尔Will Ng',
		nsname51:'侯吉祥',
		nsname61:'Yider（伊德尔）',
		nsname71:'BowAsWell',
		nsname81:'뉴튼',
		nsname91:'简爱/李宜玲',
	}
  },
  methods:{
	
  }
}
</script>

<style scoped>
.dp-fl{
	display: flex;
	justify-content: center;
}
.fl-le{
	float: left;
}
.fl-ri{
	float: right;
}
.nav-fd{
	position: fixed!important;
	background: url(../assets/homepage/df8724c.jpg) no-repeat;
	width: 100%;
	height: 21.74vw;
	background-size: cover;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	z-index: 200;
}
.get-App{
	padding: 0.2rem 0.175rem;
	width: 1.7rem;
	text-align: center;
	background: #e61723;
	color: #fafafa;
	font-style: normal;
}
.serch-logo{
	padding: .65rem;
}
.search{
	color: #000000;
}
.pd-le{
	padding-left: 0.625rem;
}
.lb{
	padding-top: 2.15rem;
	height: 4rem;
	margin-bottom: 1.332622rem;
}
.lbmodular{
	width: 100%;
	height: 100%;
}
.lbimg{
	width: 100%;
	height: 100%;
	box-shadow: 0 4px 6px #bbb;
}
.z-qqyy{
	background-color: #fff;
}
.group{
	margin-bottom: 1.332622rem;
}
.title{
	display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: .533049rem;
    font-weight: 700;
    padding: 0 .799573rem;
}
.title h2{
	color: #000000;
}
.title a{
	display: block;
	font-size: .319829rem;
	font-weight: 400;
	color: #000;
	position: relative;
	z-index: 5;
}
.title a img{
	height: 4px;
    vertical-align: middle;
    margin-left: 5px;
}
.content{
    margin-top: .319829rem;
	overflow: hidden;
}
.pd{
	padding-left: .799573rem;
}
.carousel{
	width: 3.997867rem !important;
	margin-right: .266524rem;
}
.carousel img,.carousel2 img{
	width: 100%;
}
.info h3{
	font-size: .373134rem;
	font-weight: 600;
	margin-top: .319829rem;
	color: #333;
	overflow: hidden;
	text-overflow: ellipsis ;
	white-space: nowrap;
	text-align: left;
}
.info p{
	font-size: .319829rem;
    color: #666;
    margin-top: .159914rem;
	text-align: left;
}
.info-img{
	display: inline-block;
	width: 2.61194rem;
	border-radius: 50%;
	overflow: hidden;
}
a.info h3.info-h{
	width: 2.61194rem;
	text-align: center;
}
a.info p.info-p{
	width: 2.61194rem;
	overflow: hidden;
	text-overflow: ellipsis ;
	white-space: nowrap;
	text-align: center;
}
.carousel2{
	margin-right: .266524rem;
}
.ns-recommend{
  	width: 100%;
  	height: 6.25rem;
}
.ns-content{
  	position: relative;
  	background: #CCCCCC;
	margin-top: .319829rem
}
.ns-modular{
  	height: 6.2rem;
  	overflow: hidden;
}
.ns-tab{
  	padding: 0 .799573rem;
  	overflow-x: auto;
  	overflow-y: hidden;
  	box-sizing: content-box;
  	height: 100%;
  	padding-bottom: 15px;
  	position: relative;
  	display: flex;
  	background-color: #fff;
  	user-select: none;
}
.ns-tabmore{
  	flex: 1 0 auto;
  	padding-right: .319829rem;
  	position: relative;
  	display: flex;
  	box-sizing: border-box;
  	font-size: 14px;
  	line-height: 20px;
  	cursor: pointer;
  	width: 7.25rem;
  	flex-direction: column;
  	margin-right: 1.25rem;
}
.content1{
  	display: flex;
  	flex-direction: row;
  	align-items: center;
  	height: 2.7rem;
  	zoom: .6;
}
.content-fi img{
  	width: 70%;
}
.content-se{
  	width: 100%;
  	display: flex;
  	flex-direction: column;
}
.content-se span{
  	font-size: 0.533049rem;
	color: #000000;
}
.content-th{
  	zoom: 2;
  	width: 0rem;
	color: #000000;
}
</style>
